<template>
  <div>

    <sky-panel title="自定义列宽">
      <template v-slot:main>

        <sky-layout-row type="flex">
          <sky-layout-col :span="6">
            <div class="grid-content bg-purple-light"></div>
          </sky-layout-col>
          <sky-layout-col :span="6">
            <div class="grid-content bg-purple"></div>
          </sky-layout-col>
        </sky-layout-row>

        <sky-layout-row type="flex" justify="center">
          <sky-layout-col :span="6">
            <div class="grid-content bg-purple-light"></div>
          </sky-layout-col>
          <sky-layout-col :span="6">
            <div class="grid-content bg-purple"></div>
          </sky-layout-col>
        </sky-layout-row>

        <sky-layout-row type="flex" justify="end">
          <sky-layout-col :span="6">
            <div class="grid-content bg-purple-light"></div>
          </sky-layout-col>
          <sky-layout-col :span="6">
            <div class="grid-content bg-purple"></div>
          </sky-layout-col>
        </sky-layout-row>

        <sky-layout-row type="flex" justify="space-between">
          <sky-layout-col :span="6">
            <div class="grid-content bg-purple-light"></div>
          </sky-layout-col>
          <sky-layout-col :span="6">
            <div class="grid-content bg-purple"></div>
          </sky-layout-col>
        </sky-layout-row>

        <sky-layout-row type="flex" justify="space-around">
          <sky-layout-col :span="6">
            <div class="grid-content bg-purple-light"></div>
          </sky-layout-col>
          <sky-layout-col :span="6">
            <div class="grid-content bg-purple"></div>
          </sky-layout-col>
        </sky-layout-row>

        <div class="container">

          <sky-layout-row type="flex" justify="space-between" align="middle">
            <sky-layout-col :span="6">
              <div class="grid-content bg-purple-light"></div>
            </sky-layout-col>
            <sky-layout-col :span="6">
              <div class="grid-content bg-purple-light"></div>
            </sky-layout-col>
            <sky-layout-col :span="6">
              <div class="grid-content bg-purple"></div>
            </sky-layout-col>
          </sky-layout-row>
        </div>

        <div class="container">
          <sky-layout-row type="flex" justify="space-between" align="bottom">
            <sky-layout-col :span="6">
              <div class="grid-content bg-purple-light"></div>
            </sky-layout-col>
            <sky-layout-col :span="6">
              <div class="grid-content bg-purple-light"></div>
            </sky-layout-col>
            <sky-layout-col :span="6">
              <div class="grid-content bg-purple"></div>
            </sky-layout-col>
          </sky-layout-row>
        </div>
      </template>
    </sky-panel>


    <sky-code-panel>
      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
        <code class="html">
        &lt;sky-layout-row type="flex"&gt;
          &lt;sky-layout-col :span="6"&gt;
            &lt;div class="grid-content bg-purple-light"&gt;&lt;/div&gt;
          &lt;/sky-layout-col&gt;
          &lt;sky-layout-col :span="6"&gt;
            &lt;div class="grid-content bg-purple"&gt;&lt;/div&gt;
          &lt;/sky-layout-col&gt;
        &lt;/sky-layout-row&gt;

        &lt;sky-layout-row type="flex" justify="center"&gt;
          &lt;sky-layout-col :span="6"&gt;
            &lt;div class="grid-content bg-purple-light"&gt;&lt;/div&gt;
          &lt;/sky-layout-col&gt;
          &lt;sky-layout-col :span="6"&gt;
            &lt;div class="grid-content bg-purple"&gt;&lt;/div&gt;
          &lt;/sky-layout-col&gt;
        &lt;/sky-layout-row&gt;

        &lt;sky-layout-row type="flex" justify="end"&gt;
          &lt;sky-layout-col :span="6"&gt;
            &lt;div class="grid-content bg-purple-light"&gt;&lt;/div&gt;
          &lt;/sky-layout-col&gt;
          &lt;sky-layout-col :span="6"&gt;
            &lt;div class="grid-content bg-purple"&gt;&lt;/div&gt;
          &lt;/sky-layout-col&gt;
        &lt;/sky-layout-row&gt;

        &lt;sky-layout-row type="flex" justify="space-between"&gt;
          &lt;sky-layout-col :span="6"&gt;
            &lt;div class="grid-content bg-purple-light"&gt;&lt;/div&gt;
          &lt;/sky-layout-col&gt;
          &lt;sky-layout-col :span="6"&gt;
            &lt;div class="grid-content bg-purple"&gt;&lt;/div&gt;
          &lt;/sky-layout-col&gt;
        &lt;/sky-layout-row&gt;

        &lt;sky-layout-row type="flex" justify="space-around"&gt;
          &lt;sky-layout-col :span="6"&gt;
            &lt;div class="grid-content bg-purple-light"&gt;&lt;/div&gt;
          &lt;/sky-layout-col&gt;
          &lt;sky-layout-col :span="6"&gt;
            &lt;div class="grid-content bg-purple"&gt;&lt;/div&gt;
          &lt;/sky-layout-col&gt;
        &lt;/sky-layout-row&gt;

        &lt;div class="container"&gt;
          &lt;sky-layout-row type="flex" justify="space-between" align="middle"&gt;
            &lt;sky-layout-col :span="6"&gt;
              &lt;div class="grid-content bg-purple-light"&gt;&lt;/div&gt;
            &lt;/sky-layout-col&gt;
            &lt;sky-layout-col :span="6"&gt;
              &lt;div class="grid-content bg-purple-light"&gt;&lt;/div&gt;
            &lt;/sky-layout-col&gt;
            &lt;sky-layout-col :span="6"&gt;
              &lt;div class="grid-content bg-purple"&gt;&lt;/div&gt;
            &lt;/sky-layout-col&gt;
          &lt;/sky-layout-row&gt;
        &lt;/div&gt;

        &lt;div class="container"&gt;
          &lt;sky-layout-row type="flex" justify="space-between" align="bottom"&gt;
            &lt;sky-layout-col :span="6"&gt;
              &lt;div class="grid-content bg-purple-light"&gt;&lt;/div&gt;
            &lt;/sky-layout-col&gt;
            &lt;sky-layout-col :span="6"&gt;
              &lt;div class="grid-content bg-purple-light"&gt;&lt;/div&gt;
            &lt;/sky-layout-col&gt;
            &lt;sky-layout-col :span="6"&gt;
              &lt;div class="grid-content bg-purple"&gt;&lt;/div&gt;
            &lt;/sky-layout-col&gt;
          &lt;/sky-layout-row&gt;
    
        </code>
    </pre>
      </div>
    </sky-code-panel>


  </div>
</template>

<script lang="ts">
  import { defineComponent } from "vue";

  export default defineComponent({
    setup() {},
  });
</script>

<style lang="scss" scoped>
/**容器内占位符样式 */
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.container {
  height: 120px;
  background: pink;
  margin-bottom: 50px;
  .SkyLayoutRow {
    height: 100%;
  }
}
</style>
